<template>
    <div class="passport">
        <el-dialog title="生成准考证" :visible.sync="showTicketDialog" width="50%" append-to-body @close="handleCloseDialog">
            <div class="ticket-content">
                <div class="base-info">
                    <div class="common-title">1.考试单位和岗位信息</div>
                    <div>招考单位: {{ examData.employer }}</div>
                </div>
            </div>

            <div class="ticket-content">
                <div class="base-info">
                    <div class="common-title">2.考试时间</div>
                    <div>
                        <el-date-picker v-model="examTime" type="date" placeholder="选择日期" style="margin-right: 12px;">
                        </el-date-picker>
                        <el-time-picker is-range v-model="startDate" value-format="HH:mm:ss" range-separator="至"
                            start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" @change="changeTime">
                        </el-time-picker>
                    </div>
                </div>
            </div>

            <div class="ticket-content">
                <div class="base-info">
                    <div class="common-title">3.考场排座</div>
                    <div
                        style="display: flex; align-items: center; justify-content: space-between;margin-bottom: 20px;">
                        <div style="display: flex; align-items: center;">
                            <span style="margin-right: 8px;">考场选择: </span>
                            <el-select v-model="value" placeholder="请选择考场" @change="handleChangeVenue">
                                <el-option v-for="item in venueList" :key="item.id" :label="item.venueName"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                        <div>
                            <span>参考人数</span>
                            <span>{{ applyCount }}人（已通过审核）</span>
                        </div>
                    </div>
                    <div class="table-box">
                        <el-table :data="tableData" style="width: 100%">
                            <el-table-column prop="roomName" label="考场号" width="180">
                            </el-table-column>
                            <el-table-column prop="seatNumbers" label="计划容量" width="180">
                            </el-table-column>
                            <el-table-column prop="planedNum" label="已排考">
                            </el-table-column>
                            <el-table-column label="填充人数" prop="fillCount" width="150">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.fillCount"  placeholder="请输入填充人数" />
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center" class-name="small-padding fixed-width"
                                width="260">
                                <template slot-scope="scope">
                                    <el-button type="text" @click="handleFillRow(scope.row)">全部填充</el-button>
                                    <el-button type="text" @click="handleViewSeat(scope.row)">查看座位</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div style="display: flex; justify-content: flex-end;margin-top: 10px;">
                            <!-- <div style="font-size: 14px;font-weight: 600;">已排座: 212人 ，中山小学 200人, 第一小学12人, 剩余: 0人</div> -->
                            <div>
                                <el-button type="primary" size="mini" :disabled="!tableData.length"
                                    @click="handleFillAll">一键填充</el-button>
                                <!-- <el-button type="primary" size="mini" @click="handleConfrimSeat">确认排座</el-button> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="ticket-content">
                <div class="base-info">
                    <div class="common-title">4、参考须知</div>
                    <div style="margin-bottom: 10px;">填入相关注意事项</div>
                    <editor v-model="examNotice" :min-height="200" />
                </div>
            </div>


            <div slot="footer" class="dialog-footer" style="display: flex; justify-content: flex-end;padding: 0 20px;">
                <!-- <el-button type="primary">发布准考证</el-button> -->
                <div>
                    <el-button type="primary" @click="handleSave">保存</el-button>
                    <el-button @click="handleCloseDialog">取消</el-button>
                </div>
            </div>
        </el-dialog>

        <!-- 座位列表 -->
        <el-dialog :title="dialogSeatTitle" :visible.sync="seatFlag" width="50%" append-to-body>
            <el-table :data="seats" border style="width: 100%">
                <el-table-column prop="seatNumber" label="座位号" width="180">
                </el-table-column>
                <el-table-column prop="recruitTitle" label="招聘考试名称" width="180">
                </el-table-column>
                <el-table-column prop="positionName" label="岗位">
                </el-table-column>
                <el-table-column prop="fullName" label="姓名">
                </el-table-column>
                <el-table-column prop="candNumber" label="准考证">
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button @click="seatFlag = false">返回</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getRecuit, rowSeat, addSeat, userCount, enrollExamList } from "@/api/system/recuit";
import { listVenue } from "@/api/system/venue";
export default {
    props: {
        showTicketDialog: {
            type: Boolean,
            default: false
        },
        recId: {
            type: Number,
            required: true
        },
    },
    data() {
        return {
            show: false,
            seatFlag: false,
            examData: {},
            venueList: [],
            value: '',
            dialogSeatTitle: '',
            examTime: '',
            startDate: '',
            startTime: '',
            endTime: '',
            examNotice: '',
            applyCount: 0,
            tableData: [],
            rowSeatParams: {
                recId: '',
                roomIds: []
            },
            addSeatParams: [],
            seats: []
        };
    },
    computed: {},

    created() {
        this.getExamInfo()
        this.getVenueList()
        this.getUserCount()
    },
    mounted() {

    },
    methods: {
        changeTime(arr) {
            [this.startTime, this.endTime] = arr
        },
        handleChangeVenue(val) {
            var tempArr = this.venueList.filter(item => item.id === val)
            this.tableData = tempArr[0].recruitVenueRoomList
            console.log(this.tableData, 'handleChangeVenue')

        },
        // 全部填充
        handleFillRow(row) {
            rowSeat({
                recId: this.recId,
                roomIds: [row.id]
            }).then(res => {
                if (res.code === 200) {
                    this.$modal.msgSuccess("操作成功");
                    this.addSeatParams = res.data
                }
            })
        },
        // 一键填充
        handleFillAll() {
            console.log(this.tableData, 'handleFillAll');
            rowSeat({
                recId: this.recId,
                roomList: this.tableData
            }).then(res => {
                if (res.code === 200) {
                    this.$modal.msgSuccess("操作成功");
                    this.addSeatParams = res.data
                }
            })
        },
        // 查看座位
        handleViewSeat(row) {
            console.log(row, 'dialogSeatTitle');
            enrollExamList({
                recId: this.recId,
                roomId: row.id
            }).then(res => {
                if (res.code === 200) {
                    if (res.rows.length) {
                        this.seatFlag = true
                        const venueItem = this.venueList.filter(item => item.id === this.value)[0]
                        // this.dialogSeatTitle = this.value + ' ' + row.roomName + ' ' + '座位安排'
                        this.dialogSeatTitle = `${venueItem.venueName} ${row.roomName} 座位安排`

                        this.seats = res.rows
                    } else {
                        this.seatFlag = false
                        this.$modal.msgError('暂无座位信息')
                    }
                }
            })
        },
        // handleConfrimSeat() {
        //     addSeat
        // },
        handleSave() {
            this.addSeatParams.forEach(item => {
                item.examTime = this.examTime
                item.startTime = this.startTime
                item.endTime = this.endTime
                item.examNotice = this.examNotice
            })
            addSeat(this.addSeatParams).then(res => {
                if (res.code === 200) {
                    this.$modal.msgSuccess("操作成功");
                    this.handleCloseDialog()
                }
            })
        },
        getUserCount() {
            userCount(this.recId).then(res => {
                this.applyCount = res.data
            });
        },
        handleCloseDialog() {
            this.$emit('close')
        },
        getExamInfo() {
            getRecuit(this.recId).then(response => {
                this.examData = response.data;
            });
        },
        getVenueList() {
            this.loading = true;
            listVenue({
                recId: this.recId,
                pageNum: 1,
                pageSize: 999
            }).then(response => {
                this.venueList = response.rows;
            });
        },
    },
    components: {},
}
</script>

<style lang='scss' scoped>
.ticket-content {
    margin-bottom: 20px;
    padding: 0 20px;

    .common-title {
        font-weight: 600;
        font-size: 16px;
        margin-bottom: 10px;
    }
}
</style>